<template>
    <first-template class="settlement-contents">
        <div slot="title" class="tab">
            <div class="tab-item" :class="currentIndex == i ? 'current': ''" v-for="(item, i) in tabList" :key="i" @click="choiceTab(item, i)">{{item.name}}</div>
            <span class="current-line" :class="`current-line-${currentIndex}`"></span>
        </div>
        <div slot="content" class="contentss">
            <search-box
            :paramArray="paramArray"
            :reset="false"
            >
            </search-box>
            <table-box
            :tableObj="tableObj"
            >
             <Button slot="action"   type="primary" size="small" style="margin-right: 5px" @click="show($event)">123123</Button>
            </table-box>
        </div>
    </first-template>
</template>
<script>
export default {
    name: 'workBenchSettleMentWageContent',
    data () {
        return {
            tabList: [
                {
                    name: '工资结算',
                    value: 0
                },
                {
                    name: '工程款结算',
                    value: 1
                }
            ],
            currentIndex: 0,
            paramArray: [
                {
                    key: 'input',
                    value: '',
                    label: '名称查询',
                    placeholder: '请输入项目名称',
                    width: '',
                    selectList: [],
                    casArray: []
                },
                {
                    key: 'startEndTime',
                    value: '',
                    label: '起止时间',
                    placeholder: '开始日期          -          结束日期',
                    width: '',
                    selectList: [],
                    casArray: []
                },
                {
                    key: 'select',
                    value: '',
                    label: '状态',
                    placeholder: '请选择',
                    width: '',
                    selectList: [],
                    casArray: []
                }
                
            ],
            tableObj: {
                pageObj: {
                    pageSize: 10,
                    total: 11
                },
                list: [{content: '你好'}],
                columns: [
                    {
                        key: 'content',
                        title: '班组名称'
                    },
                    {
                        key: 'content',
                        title: '分包名'
                    },
                    {
                        key: 'content',
                        title: '所属项目'
                    },
                    {
                        key: 'content',
                        title: '金额'
                    },
                    {
                        key: 'content',
                        title: '本次提交工程量'
                    },
                    {
                        key: 'content',
                        title: '审核状态'
                    },
                    {
                        key: 'content',
                        title: '日期'
                    },
                    {
                        slot: 'action',
                        key: 'action',
                        title: '操作'
                    }
                ]
            }
        }
    },
    methods: {
        choiceTab (item, i) {
            this.currentIndex = i
            setTimeout(() => {
                this.$router.push({
                    name: 'settlementEngineeringFound'
                })
            }, 300)
        },
        show (row) {
            console.log(row)
        }
    }
}
</script>
<style lang="less" scoped>
.settlement-contents {
    .tab {
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
        .tab-item {
            float: left;
            width: 100px;
            height: 100%;
            text-align: center;
            font-size: 16px;
            color: #333;
            cursor: pointer;
            &.current {
                color: #1298FC;
            }
        }
        .current-line {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100px;
            height: 3px;
            background: #1298FC;
            border-radius: 1.5px;
            transition: left .3s;
            &.current-line-0 {
                left: 0;
            }
            &.current-line-1 {
                left: 100px;
            }
        }
    }
    .contentss {
        padding: 10px;
        .search-box {
            padding: 20px 0;
        }
    }
}
</style>